<template>
  <div class="main">
    <!-- 第一行 项目地址 -->
    <div class="line-flex">
      <m-card
        v-for="k in line1Data"
        :key="k.name"
        :title="k.message"
        width="350px"
      >
        <a :href="k.url" class="link">{{ k.name }}</a>
      </m-card>
    </div>
    <!-- 第二行 今日订单情况 -->
    <div class="line-flex">
      <m-card v-for="k in line2Data" :key="k.name" width="350px">
        <div class="txt-flex">
          <img :src="k.url" class="txt-img">
          <div>
            <p style="font-size: 16px; color: #909399">{{ k.message }}</p>
            <p style="font-size: 18px; color: ##606266; font-weight: 700">
              ￥{{ k.num }}
            </p>
          </div>
        </div>
      </m-card>
    </div>
    <!-- 第三行 今日订单业务情况 -->
    <m-card title="待处理事务" width="1450px" style="margin-bottom: 20px">
      <div class="order">
        <LineOrder v-for="k in line3Data" :key="k.name" :data="k" />
      </div>
    </m-card>
    <!-- 第四行 数据总览 -->
    <div class="line-overview">
      <!-- 左模块 商品总览 -->
      <m-card title="商品总览" width="715px">
        <div class="overview-box">
          <div
            v-for="k in commodity_overview"
            :key="k.name"
            class="overview-flex"
          >
            <span style="color: #f56c6c; font-size: 24px">{{ k.num }}</span>
            <span style="font-size: 16px">{{ k.message }}</span>
          </div>
        </div>
      </m-card>
      <!-- 右模块 用户总览 -->
      <m-card title="用户总览" width="715px">
        <div class="overview-box">
          <div v-for="k in user_overview" :key="k.name" class="overview-flex">
            <span style="color: #f56c6c; font-size: 24px">{{ k.num }}</span>
            <span style="font-size: 16px">{{ k.message }}</span>
          </div>
        </div>
      </m-card>
    </div>
    <!-- 第五行 订单统计 -->
    <m-card title="订单统计" width="1450px">
      <div style="display: flex">
        <div class="total-data">
          <div v-for="k in order_statistics" :key="k.name" class="total-flex">
            <span>{{ k.message }}</span>
            <span style="font-size: 24px">{{ k.num }}</span>
            <span
              class="total-txt"
            ><span
              class="green"
              :class="{ red: k.compare.percentage > 0 }"
            >{{
              k.compare.percentage > 0
                ? '+' + k.compare.percentage
                : k.compare.percentage
            }}%</span>{{ k.compare.info_code }}</span>
          </div>
        </div>
        <div class="chart-dom">
          <div ref="mychart" class="total-echart" />
        </div>
      </div>
    </m-card>
  </div>
</template>

<script>
import LineOrder from './components/LineOrder.vue'
import { getHomeUrl, getHomeOrder, getEchartsData } from '@/api/dashboard'
export default {
  components: {
    LineOrder
  },
  data() {
    return {
      line1Data: [],
      line2Data: [],
      line3Data: [],
      commodity_overview: [],
      user_overview: [],
      order_statistics: []
    }
  },
  created() {
    this.getHomeUrl()
    this.getHomeOrder()
  },
  mounted() {
    this.getEcharts()
  },
  methods: {
    async getHomeUrl() {
      const { homeUrl: res } = await getHomeUrl()
      this.line1Data = res
    },
    async getHomeOrder() {
      const res = await getHomeOrder()
      this.line2Data = res.order_total
      this.line3Data = res.order_data
      this.commodity_overview = res.commodity_overview
      this.user_overview = res.user_overview
      this.order_statistics = res.order_statistics
    },
    async getEchartsData() {
      const res = await getEchartsData()
      const data = {
        line1: res.order_amount,
        line2: res.order_number
      }
      return data
    },
    async getEcharts() {
      const echartData = await getEchartsData()
      const chartDom = this.$refs.mychart
      const mychart = this.$echarts.init(chartDom)
      const option = {
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        tooltip: {
          trigger: 'axis'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        series: [
          {
            data: echartData.order_amount,
            type: 'line',
            smooth: true,
            areaStyle: {
              color: '#5de1c6'
            },
            lineStyle: {
              color: '#5de1c6'
            }
          },
          {
            data: echartData.order_number,
            type: 'line',
            smooth: true,
            areaStyle: {
              color: '#5bbfe3'
            },
            lineStyle: {
              color: '#5bbfe3'
            }
          }
        ]
      }
      option && mychart.setOption(option)
      window.addEventListener('resize', function() {
        mychart.resize()
      })
    }
  }
}
</script>

<style lang="scss">
$color: #409eff;
.main {
  padding: 60px 140px 30px;
}

.line-flex {
  display: flex;
  width: 1090px;
  justify-content: space-between;
  margin-bottom: 20px;

  .link {
    font-size: 18px;
    color: $color;
    font-weight: normal;
  }

  .txt-flex {
    height: 60px;
    display: flex;

    .txt-img {
      width: 60px;
      height: 60px;
      margin-right: 10px;
    }
  }
}

.order {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}

.line-overview {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  width: 1450px;

  .overview-box {
    display: flex;
    justify-content: space-around;

    .overview-flex {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
  }
}

.total-data {
  width: 220px;
  border-right: 1px solid #dcdcdc;

  .total-flex {
    height: 80px;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    margin-bottom: 20px;

    .total-txt {
      color: #c0cfe2;
    }
  }
}

.chart-dom {
  width: 100%;
  height: 400px;
  position: relative;
  margin-left: 20px;
}

.total-echart {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 300px;
  flex: 1;
}

.green {
  color: #67cdd3;
  margin-right: 5px;
}
.red {
  color: #f56c82;
  margin-right: 5px;
}
</style>
